<template>
  <view>
    <view class="tan">
      <view class="tan-mask"
            @tap="tap_handler(0)"></view>
      <view class="tan-modal">
        <view class="tan-title">
          <view>是否退出</view>
        </view>
        <view class="tan-content">
          <view class="exam-tan-content">
            <view class="exam-tan-content-flex">
              <span>答题数</span>
              <view>{{timuinfo.yida_num}}题数</view>
            </view>
            <view class="exam-tan-content-flex">
              <span>正确率</span>
              <view>{{timuinfo.zhengquelv}}%</view>
            </view>
            <view class="exam-tan-content-flex">
              <span>正确</span>
              <view class="pub-green">{{timuinfo.right_num}}</view>
            </view>
            <view class="exam-tan-content-flex">
              <span>错误</span>
              <view class="pub-red">{{timuinfo.error_num}}</view>
            </view>
          </view>
          <view class="exam-tan-button">
            <view class="exam-tan-button-l"
                  @tap="tap_handler(0)">继续</view>
            <view class="exam-tan-button-r"
                  @tap="tap_handler(1)">结束</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    timuinfo: {
      type: Object,
      default: {
        library_name: '',
        total_num: 0,
        zhengquelv: 0,
        right_num: 0,
        error_num: 0,
        yida_num:0
      }
    }
  },
  computed: {},
  methods: {
		tap_handler (type) {
			this.$emit('tap_handler', type)
		}
	}
}
</script>

<style>
/*弹窗*/
.tan-mask {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.tan-modal {
  position: fixed;
  z-index: 999;
  width: 80%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
}
.tan-title {
  padding: 15px 0;
  border-bottom: solid 1px #f4f4f4;
}
.tan-title view {
  font-weight: 400;
  font-size: 17px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tan-content {
  width: 90%;
  margin: 0 auto;
  font-size: 14px;
}
.exam-tan-content-flex {
  display: flex;
  width: 91%;
  margin: 0 auto;
  padding: 13px 0;
  border-bottom: solid 1px #f4f4f4;
}
.exam-tan-content-flex span {
  color: #767676;
  width: 42%;
  text-align: left;
}
.exam-tan-button {
  color: #fff;
  padding: 12px 0;
  margin: 10px 0;
  border-radius: 4px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.exam-tan-button-l {
  background: #3c7bfc;
  width: 48%;
  padding: 8px 0;
  border-radius: 2px;
}
.exam-tan-button-r {
  background: #e4e4e4;
  color: #000;
  width: 48%;
  padding: 8px 0;
  border-radius: 2px;
}
</style>
